<style type="text/css">
    body{
        background: #f5f5f5;
    }
    .mv-list-image {
        margin-top: 5px;
        overflow: hidden;
    }

    .list-left img {
        display: inline-block;
        height: 40px;
    }
    .list{
        width: 100%;
        margin-top: 60px;
    }
    .list li {
        display: inline-block;
        width: 24%;
        text-align: center;
    }
    .list .icon {
        width: 68px;
    }

    .list p {
        width: 100%;
        text-align: center;
        color: #8A8A8A;
        font-weight: 600;
        margin-top: 20px;
    }
    .search{
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    .search img{
        width: 25px;
        vertical-align:middle
    }
    .search .content{
        background: rgb(206, 206, 206);
        width: 80%;
        display: inline-block;
    }
    input{
        background:  rgb(206, 206, 206);
        height: 30px;
        border:none;
        color: #8A8A8A
    }
    .left{
        margin-right: 30px;
        border-right: 1px solid #8A8A8A;
    }
    .right{
        margin-left: 30px;

    }
    .header{
        padding-left: 7px;
        background: #ffffff;
    }
    .header li{
        display: inline-block;
        font-size: 18px;
        color: #888;
        width: 70px;
        height: 20px;
        text-align: center;
        padding: 10px 0px;
    }
    .header ul .sbtc{
        color: #0076ff;
        border-bottom: 2px solid #0076ff;
    }
    .header li:nth-child(5){
        padding: 0;
        border-left: 1px solid #888;
    }
    .main h4{
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        background: #ffffff;
    }
    .main li{
        height: 175px;
        background: #ffffff;
    }
    .main .top{
        padding-top: 15px;
        padding-left: 10px;
    }
    .main .top .toux1{
        width: 32px;
        height: 32px;
        background: url("../../Images/FindIcons/jy_5.png") no-repeat;
        background-size: 100%;
        border-radius: 45px;
        float: left;
    }
    .main .top .toux2{
        width: 32px;
        height: 32px;
        background: url("../../Images/FindIcons/jy_6.png") no-repeat;
        background-size: 100%;
        border-radius: 45px;
        float: left;
    }
    .main .top .toux3{
        width: 32px;
        height: 32px;
        background: url("../../Images/FindIcons/jy_7.png") no-repeat;
        border-radius: 45px;
        float: left;
    }
    .main .txt{
        float: right;
        margin-top: -17px;
        margin-right: 20px;
    }
    .main .sl{
        margin-top: 20px;
    }
    .main p{
        margin-top: 10px;
        margin-left: 20px;
        color: #bbbbbb;
    }
    .main .ds{
        float: left;
    }
    .main .wcl{
        float: left;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid #888;
    }
    .main button{
        position: absolute;
        top: 65px;
        left: 265px;
        width: 90px;
        height: 40px;
        color: #ffffff;
        background: #f26a3a;
        border-radius: 5px;
    }
    .mv-tabs a:nth-child(1) {
        border-left: 1px solid #43527f;
    }
</style>
<div class="mv-tabs">
    <a v-on:click="choose($event,-1)" onclick="mview.view.load('/views/stock/mbtc.html')">买币</a><a class="mid-color"  v-on:click="choose($event,1)" onclick="mview.view.load('/views/stock/sbtc.html')">卖币</a>
</div>
<div class="header">
    <ul>
        <li class="sbtc">BTC</li>
        <a onclick="mview.view.load('/views/stock/seth.html')">
            <li>ETH</li>
        </a>
        <a onclick="mview.view.load('/views/stock/susdt.html')">
            <li>USDT</li>
        </a>
        <a onclick="mview.view.load('/views/stock/seos.html')">
            <li>EOS</li>
        </a>
        <li>
            <img src="../../Images/FindIcons/jy_1.png" alt="" width="15" height="15" style="margin-top: 5px">
        </li>
    </ul>
</div>
<div class="main">
    <h4>BTC市场参考价44491.7542CNY</h4>
    <ul>
        <li style="position: relative;margin-top: 10px">
            <div class="top">
                <div class="toux1"></div>
                <span style="float:left;margin-top: 5px;margin-left: 10px">芒果老板</span>
                <img src="../../Images/FindIcons/zfb.png" alt="" width="18" height="18" style="margin-left: 5px;margin-top: 5px">
                <img src="../../Images/FindIcons/wx.png" alt="" width="18" height="18" style="margin-top: 5px">
                <img src="../../Images/FindIcons/yl.png" alt="" width="23" height="18" style="margin-top: 5px">
            </div>
            <span class="txt">44269.2955&nbsp;CNY</span>
            <p class="sl">数量&nbsp;&nbsp; <span>0.1-5 &nbsp;&nbsp;&nbsp;BTC</span></p>
            <p>金额&nbsp;&nbsp; <span>4426.92-221346.47&nbsp;&nbsp;&nbsp;CNY</span></p>
            <hr style="margin-top: 20px ;width: 330px">
            <p class="ds">2417单</p>
            <p class="wcl">92.96%完成率</p>
            <button>出售</button>
        </li>
        <li style="position: relative;margin-top: 10px">
            <div class="top">
                <div class="toux2"></div>
                <span style="float:left;margin-top: 5px;margin-left: 10px">一二三四</span>
                <img src="../../Images/FindIcons/wx.png" alt="" width="18" height="18" style="margin-left:5px;margin-top: 5px">
                <img src="../../Images/FindIcons/yl.png" alt="" width="23" height="18" style="margin-top: 5px">
            </div>
            <span class="txt">44380.5249&nbsp;CNY</span>
            <p class="sl">数量&nbsp;&nbsp; <span>0.2-20 &nbsp;&nbsp;&nbsp;BTC</span></p>
            <p>金额&nbsp;&nbsp; <span>8876.1-887610.49&nbsp;&nbsp;&nbsp;CNY</span></p>
            <hr style="margin-top: 20px ;width: 330px">
            <p class="ds">40单</p>
            <p class="wcl">70.18%完成率</p>
            <button>出售</button>
        </li>
        <li style="position: relative;margin-top: 10px">
            <div class="top">
                <div class="toux3"></div>
                <span style="float:left;margin-top: 5px;margin-left: 10px">888888</span>
                <img src="../../Images/FindIcons/yl.png" alt="" width="23" height="18" style="margin-left: 5px;margin-top: 5px">
            </div>
            <span class="txt">42380.5239&nbsp;CNY</span>
            <p class="sl">数量&nbsp;&nbsp; <span>0.2-20 &nbsp;&nbsp;&nbsp;BTC</span></p>
            <p>金额&nbsp;&nbsp; <span>8827.1-887610.49&nbsp;&nbsp;&nbsp;CNY</span></p>
            <hr style="margin-top: 20px ;width: 330px">
            <p class="ds">2417单</p>
            <p class="wcl">92.96%完成率</p>
            <button>出售</button>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_STOCK_DEALLISTS",
            page: 0,
            type: -1
        },
        screen: {
            header_display: true,
            header_title_name: "账单",
            header_exit_name: "返回",
            header_exit_click: function () {
                mview.view.load('/views/home/main.html')
            },
            footer_display: true,
            footer_choose: "user"
        },
        data: {
            morename: "查看更多",
            test:""
        },
        methods: {
            clean:function(){
                this.test=""
            },
            choose: function (elm, type) {
                m.view.node(".mv-tabs a").removeClass("mid-color");
                m.view.node(elm.currentTarget).addClass("mid-color");
                pagedata.request.page = 0;
                pagedata.request.type = type;
                pagedata.reload();
            },
            detail: function (id, title) {
                mview.view.load('/views/Stock/dealdetail.html', {
                    id: id,
                    title: title
                });
            },
            //加载更多
            more: function () {
                pagedata.request.page += 1;
                mview.socket.send({
                    data: {
                        method: "VIEW_STOCK_DEALLISTS",
                        page: pagedata.request.page,
                        type: pagedata.request.type,
                        part: 1
                    },
                    success: function (json) {
                        if (json.Code == 0 && json.Data.datas.length > 0) {
                            for (var i in json.Data.datas) {
                                var data = json.Data.datas[i];
                                mview.vue.stage.$data.bag.dataend = json.Data.dataend;
                                mview.vue.stage.$data.bag.datas.push(data);
                            }
                        }
                    }
                });
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>